<template>
    <div class="schedule-calendar-picker-list" v-if="visible">
        <div class="schedule-calendar-picker-col" style="width: 40%">
            <ul ref="monthList">
                <li v-for="n in 12"
                    :class="{active: n === month + 1}"
                    @click="selectMonth(n - 1)">{{n}}</li>
            </ul>
        </div>
        <div class="schedule-calendar-picker-col" style="width: 60%">
            <ul ref="yearList">
                <li v-for="n in endYear - beginYear"
                    :class="{ active: beginYear + n === year}"
                    @click="selectYear(beginYear + n)">{{beginYear + n}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        beginYear: {
            type: Number,
            default: 1900
        },
        endYear: {
            type: Number,
            default: 2100
        },
        year: Number,
        month: Number,
        visible: Boolean
    },
    watch: {
        visible(val) {
            if(!val) return
            this.$nextTick(() => {
                this.$refs.yearList.querySelector('li.active').scrollIntoView()
                this.$refs.monthList.querySelector('li.active').scrollIntoView()
            })
        }
    },
    methods: {
        selectYear(year) {
            this.$parent.updateValue(year)
        },
        selectMonth(month) {
            this.$parent.updateValue(this.year, month)
        }
    }
}
</script>
<style lang="scss">

    .schedule-calendar-picker-list{
            position: absolute;
            top: 100%;
            left: 0;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            font-size: 14px;
            color: #666;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .schedule-calendar-picker-col{
        overflow: hidden;
        height: 210px;
        // padding-bottom: 100%;
         overflow-y: auto;
        >ul{
            padding: 0;
            margin: 0;
            >li{
                padding: 0 12px;
                    line-height: 30px;
                    cursor: pointer;
            }
        }
        .active{
          color: #2196f3;
          font-weight: bold;  
        }
        &:first-child {
            border-right: 1px solid #e8e8e8;
        }
    }


</style>
